<template>
	<div>
		<button @click="isShow = !isShow">显示/隐藏</button>
		<transition name="hello1">
			<h1 v-show="isShow">你好啊1！</h1>
		</transition>
		<transition name="hello2">
			<h1 v-show="isShow">你好啊2！</h1>
		</transition>
	</div>
</template>

<script>
	export default {
		name:'App',
		data() {
			return {
				isShow:true
			}
		},
	}
</script>

<style scoped>
	h1{
		background-color: orange;
	}
	@keyframes atguigu{
		0%{
			transform: translateX(0px);
		}
		100%{
			transform: translateX(-100%);
		}
	}
	@keyframes shangguigu{
		0%{
			opacity: 1;
		}
		100%{
			opacity: 0;
		}
	}
	.hello1-leave-active{
		animation:atguigu 1s linear;
	}
	.hello1-enter-active{
		animation:atguigu 1s linear reverse;
	}
	.hello2-leave-active{
		animation:shangguigu 1s linear;
	}
	.hello2-enter-active{
		animation:shangguigu 1s linear reverse;
	}
</style>